<template>
	<view>
		<view class="container" @click.stop="closeMask">
			<form @submit="formSubmit">
				<view class="modify" @click.stop="clickBirth">
					<block v-if="birth == ''">
						<lang class="gray" keywords="请点击输入生日"></lang>
					</block>
					<text v-else>{{birth}}</text>
				</view>
				<button class="block_btn mlr20" formType="submit" :style="'background:' + mobile_head_color">
					<lang keywords="确定"></lang>
				</button>
			</form>
		</view>


		<view :class="'select-birth ' + (show_picker ? 'show' : '')">
			<view class="title">
				<view class="block-in" @click.stop="closeMask">
					<lang keywords="取消" class="green" ></lang>
				</view>
				<lang keywords="选择日期"></lang>
				<view class="block-in" @click.stop="pickerConfirm">
					<lang keywords="确定" class="green" ></lang>
				</view>
			</view>
			<picker-view class="birth-picker" indicator-class="selected-item" v-if="years.length > 0 && picker_value" :value="picker_value" @change="changeBirth">
				<block v-if="!open_multilingual">
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in years" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in months" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in days" :key="index">{{item}}</view>
					</picker-view-column>
				</block>

				<block v-if="open_multilingual">
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in days" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in months" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in years" :key="index">{{item}}</view>
					</picker-view-column>
				</block>


			</picker-view>
		</view>
	</view>
</template>

<script>
	var _this;
	import common from '../../utils/common.js';
	var app = getApp();
	const date = new Date();
	const first_value = date.getFullYear() - 1900;

	export default {
		data() {
			return {
				birth: '',
				// picker选择的日期
				years: [],
				// picker年数组
				months: [],
				// picker月数组
				days: [],
				// picker日数组
				picker_value: '' ,
				// picker初始化日期
				show_picker: false,
				// 是否显示picker
				from_page: '',
				open_multilingual: app.globalData.open_multilingual,
				mobile_head_color: '',
				config: ''
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			_this = this;
			_this.getDayArr()
			common.setMainColor(_this);
			wx.setNavigationBarTitle({
				title: common.changeTxt('修改生日')
			});
			
			if (options.birth != '0000-00-00') {
				var arr = options.birth.split('-');
				if (_this.open_multilingual) {
					var picker_value = [arr[2] * 1 - 1, arr[1] * 1 - 1, arr[0] * 1 - 1900];
				} else {
					var picker_value = [arr[0] * 1 - 1900, arr[1] * 1 - 1, arr[2] * 1 - 1];
				}
				console.log('设置pick-view的初始值', picker_value)
				_this.birth = options.birth
				_this.picker_value = picker_value
			} else {
				_this.picker_value = [first_value, date.getMonth(), date.getDate() - 1]
			}

		},
		
		onShow () {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		methods: {
			getDayArr () {
				var days = [], months = [], years = []
				for (let i = 1; i <= 12; i++) {
				  months.push(i);
				}
				for (let i = 1; i <= 31; i++) {
				  days.push(i);
				}
				for (let i = 1900; i <= date.getFullYear(); i++) {
				  years.push(i);
				}
				this.days = days
				this.months = months
				this.years = years
			},
			clickBirth() {
				_this.show_picker = true
			},

			// 选择生日的picker发生改变
			changeBirth(e) {
				var val = e.detail.value;
				this.picker_value = val;
				if (_this.open_multilingual) {
					_this.birth = `${this.years[val[2]]}-${this.months[val[1]]}-${this.days[val[0]]}`;
				} else {
					_this.birth = `${this.years[val[0]]}-${this.months[val[1]]}-${this.days[val[2]]}`;
				}
			},

			// 生日picker确定按钮
			pickerConfirm() {
				this.birth = this.birth
				this.picker_value = this.picker_value
				this.show_picker = false
			},

			// 点击确定，保存生日
			formSubmit() {
				var param = {
					birthday: this.birth,
					store_id: 1
				};
				common.post('My&a=birthday', param, data => {
					if (data) {
						app.globalData.userInfo.birthday = _this.birth;
						app.globalData.userInfo.age = data.age;
						common.navigateBack()
					}
				});
			},

			closeMask() {
				this.show_picker = false
			}
		}
	};
</script>
<style scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.container {
		height: 100%;
	}

	.modify {
		padding: 30rpx;
		background: #fff;
		border-bottom: #f1f1f1 1rpx solid;
	}

	.gray {
		color: #999;
	}

	.remind {
		padding: 30rpx 20rpx 0 20rpx;
		line-height: 1;
	}

	.select-birth {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 260px;
		margin-top: 20px;
		background: #fff;
		transform: translateY(100%);
		transition: all .3s;
	}

	.select-birth.show {
		transform: translateY(0);
	}

	.select-birth .title {
		height: 50px;
		line-height: 50px;
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		font-weight: 500;
	}

	.select-birth .title .green {
		color: #56d176;
		font-size: 16px;
		padding: 0 40rpx;
	}

	.select-birth .birth-picker {
		width: 100%;
		height: calc(100% - 50px);
	}

	.select-birth .birth-picker .picker-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
